import React from 'react'
// 导入NavBar Input 组件
import NavBar from '@/components/NavBar'
import Input from '@/components/Input'
import styles from './index.module.scss'
import { useFormik } from 'formik'
import * as Yup from 'yup'
import classNames from 'classnames'
import { useDispatch } from 'react-redux'
import { login, sendCode } from '@/store/actions/login'
import { Toast } from 'antd-mobile'
import { useState } from 'react'
import { useHistory, useLocation } from 'react-router-dom'
// import { useRef } from 'react'
export default function Login() {
  const dispatch = useDispatch()
  // const timeRef = useRef(0)
  const [time, setTime] = useState(0)
  const history = useHistory()
  const location = useLocation()
  const onExtraClick = async () => {
    // 如果时间大于0再次点击 终止程序 不会触发点击时间
    if (time > 0) return
    // 如果校验没有通过
    if (!/^1[3-9]\d{9}$/.test(mobile)) {
      // 触发表单的 手机号校验
      form.setTouched({
        mobile: true,
      })
      // 终止程序
      return
    }
    // 成功走这里
    await dispatch(sendCode(mobile))
    // 提醒用户获取成功
    Toast.success('获取验证码成功', 1)
    // 开启定时器
    setTime(10)
    let timerId = setInterval(() => {
      // 回调函数内的time是最新的time 外面的time不是最新的
      setTime((time) => {
        if (time === 1) {
          clearInterval(timerId)
        }
        return time - 1
      })
    }, 1000)
  }
  const form = useFormik({
    // 表单的初始值
    initialValues: {
      mobile: '13911111111',
      code: '246810',
    },
    // 表单提交  可以获取表单的值
    async onSubmit(values) {
      // 调用接口
      await dispatch(login(values))
      // 提醒用户
      Toast.success('登录成功', 1)
      const pathname = location.state ? location.state.from : '/home'
      // history.go(-1) 页面回退
      // history.go(1) 页面前进
      // history.push() 页面跳转，并且往页面栈中添加一条记录
      // history.replace() 页面跳转，但是不会添加一条记录，而且替换当前的记录
      history.replace(pathname)
    },
    // 表单的校验
    validationSchema: Yup.object({
      // 手机号验证
      mobile: Yup.string()
        .required('手机号不能为空')
        .matches(/^1[3-9]\d{9}$/, '手机号格式错误'),
      // 验证码验证
      code: Yup.string()
        .required('验证码不能为空')
        .matches(/^\d{6}$/, '验证码格式错误'),
    }),
  })

  // 从form中解构方法和属性
  const {
    handleSubmit,
    handleChange,
    handleBlur,
    values: { mobile, code },
    errors,
    touched,
    isValid,
  } = form
  // 错误  所有的错误信息
  // console.log(errors)
  // 是否触摸  接触到输入框才进行校验
  // console.log(touched)
  // 是否有效  button按钮要用 如果为FALSE 类名有效
  // console.log(isValid)
  return (
    <div className={styles.root}>
      <NavBar>登录</NavBar>
      <div className="content">
        <h3>短信登录</h3>
        <form onSubmit={handleSubmit}>
          {/* 手机号验证 */}
          <div className="input-item">
            <div className="input-bpx">
              <Input
                placeholder="请输入手机号"
                name="mobile"
                value={mobile}
                onChange={handleChange}
                autoComplete="off"
                onBlur={handleBlur}
                maxLength="11"
              ></Input>
            </div>
            {/* <div className="validate">手机号验证错误信息</div> */}
            {errors.mobile && touched.mobile && (
              <div className="validate">{errors.mobile}</div>
            )}
          </div>
          {/* 短信验证 */}
          <div className="input-item">
            <div className="input-bpx">
              <Input
                placeholder="请输入验证码"
                extra={time === 0 ? '获取验证码' : time + 's后获取'}
                onExtraClick={onExtraClick}
                name="code"
                value={code}
                onChange={handleChange}
                autoComplete="off"
                onBlur={handleBlur}
                maxLength="6"
              ></Input>
            </div>
            {/* <div className="validate">短信验证错误信息</div> */}
            {errors.code && touched.code && (
              <div className="validate">{errors.code}</div>
            )}
          </div>
          {/* 登录按钮 */}
          <button
            type="submit"
            className={classNames('login-btn', isValid ? '' : 'disabled')}
          >
            登录
          </button>
        </form>
      </div>
    </div>
  )
}
